﻿<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>绘制基本图形(箭头-方向)</title>
    <meta charset="UTF-8">
    <!--代码语法高亮-->
    <link rel="stylesheet" href="../../script/codemirror/codemirror.css">
    <script src="../../script/codemirror/codemirror_merge.js"></script>
    <script src="../js/data_box.js"></script>
    <!-- 加载代码块 -->
    <script src="./js/show-data.js"></script>
</head>

<body style="margin:10px;">
    <div id="graphWrapper" data-type="graph" style="width:1000px; height:400px; border:solid 1px #CCC;"></div>
   <div id="divData" style="position: absolute; top:420px; bottom:10px; left:10px; right: 10px;"></div>
</body>
<script>
    let graph;
</script>
<script type="module">
    import { Graph, Polyline, Circle, BgUtil } from "../../src/index.js";

    // graph对象
    graph = new Graph({
        "target": "graphWrapper",
        "mouse": true
    });

    // 新建图层
    let layer = graph.addLayer();
    BgUtil.generateGrid(Object.assign({ "interval": 10, "graph":graph }, graph.getSize()));

    // 上
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [200, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [300, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [400, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [500, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [600, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [700, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [800, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));

    // 下
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [200, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [300, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [400, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [500, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [600, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [700, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [800, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 350]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));

    // 左
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 100]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 150]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 200]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 250]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [100, 300]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));

    // 右
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 50]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 100]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 150]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 200]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 250]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));
    layer.getSource().add(new Polyline({ "coords": [[500, 200], [900, 300]], "style": { "lineWidth": 2 }, "startArrowType": 1 }));


    layer.getSource().add(new Circle({ "x": 500, "y": 200, "radius": 20, "style": { "fillStyle": 1 } }));
    graph.render();
</script>

</html>